<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1.1 输出结果,并写出为什么 ？
        // for (var i = 0; i <= 5; i++) {
        //     console.log(i);
        //     setTimeout(() => {
        //         console.log(i);
        //     }, i * 1000)
        // }
        // console.log(i);
        // setTimeout是异步执行的，1000毫秒后向任务队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线程for循环执行完之后 i 的值为6这个时候再去任务队列中执行任务，i全部为6；
        // console.log(i);
        //1.2 以上代码如果想输出6,0,1,2,3,4,5,怎么实现?
        //2.输出结果,并写出为什么 ？
        // var obj1 = {
        //     a: 1,
        //     b: 2,
        //     c: 3,
        //     d: {
        //         e: 4
        //     }
        // }
        // var obj2 = {
        //     ...obj1
        // }
        // obj1.a = 2
        // obj1.d.e = 5
        // console.log(obj2);
        // 声明一个全局变量obj1此时又有一个obj2通过扩展运算符把obj1赋值给obj2然后下面的赋值操作在这个时候log出obj2还是以前的数据代码的执行流程从上到下所以log的出来的数据还是obj1之前声明的值
        //3.输出结果说出，并写出为什么 ？
        // setTimeout(() => {
        //     console.log(1);
        // }, 0)
        // new Promise((resolve, reject) => {
        //     console.log(2); //这里是同步
        //     resolve()
        // }).then(() => {
        //     console.log(4);
        // })
        // console.log('这里是同步');
        //4.数组去重,写出至少2种方法
        // let arr = [12, 24, 37, 37, 24, 49, 49, 55, 55]
        // 第一种
        // let arr1 = []
        // arr.forEach(item => {
        //     if (arr1.indexOf(item) == -1) {
        //         arr1.push(item)
        //     }
        // })
        // console.log(arr1);
        // 第二种通过es6去重
        // function unique(arr) {
        //     return Array.from(new Set(arr))
        // }
        // console.log(unique(arr))
        //5.写出至少3种深拷贝方法
        //使用递归的方式实现数组、对象的深拷贝
        // function deepClone1(obj) {
        //     //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
        //     var objClone = Array.isArray(obj) ? [] : {};
        //     //进行深拷贝的不能为空，并且是对象或者是
        //     if (obj && typeof obj === "object") {
        //         for (key in obj) {
        //             if (obj.hasOwnProperty(key)) {
        //                 if (obj[key] && typeof obj[key] === "object") {
        //                     objClone[key] = deepClone1(obj[key]);
        //                 } else {
        //                     objClone[key] = obj[key];
        //                 }
        //             }
        //         }
        //     }
        //     return objClone;
        // }
        //6.通过js的内置对象JSON来进行数组对象的深拷贝
        // function deepClone2(obj) {
        //     var _obj = JSON.stringify(obj),
        //         objClone = JSON.parse(_obj);
        //     return objClone;
        // }
        // 7.javascript的typeof返回的那些数据类型？
        // undefined string  boolean number   Object  Function
        // alert(typeof [1, 2]); //object
        // alert(typeof '111111'); //string
        // var i = true;
        // alert(typeof i); //boolean
        // alert(typeof 1); //number
        // var a;
        // alert(typeof a); //undefined
        // function a() {;
        // };
        // alert(typeof a) //function
        // 
        // \\
        // 8.split和join的区别？
        // 前者是切割成数组的形式， 后者是将数组转换成字符串join函数获取一批字符串， 然后用分隔符字符串将它们连接起来， 从而返回一个字符串。 Split函数获取一个字符串， 然后再分隔符处将其断开， 从而返回一批字符串。 但是， 这两个函数之间的主要区别在于join可以使用任何分隔符字符串将多个字符串连接起来， 而split只能使用一个字符分隔符将字符串断开
        // 简单地说， 如果你用split， 是把一串字符（ 根据某个分隔符） 分成若干个元素存放在一个数组里。
        // 而join是把数组中的字符串连成一个长串， 可以大体上认为是split的逆操作
        //9.事件委托是什么？
        // 事件委托也称之为事件代理（ Event Delegation）。 是JavaScript中常用绑定事件的常用技巧。 顾名思义，“ 事件代理” 即是把原本需要绑定在子元素的响应事件委托给父元素， 让父元素担当事件监听的职务。 事件代理的原理是DOM元素的事件冒泡。
        // 10. 添加 删除 替换 插入到某个节点的方法？
        // obj.appendChild() //添加
        // obj.insertBefore(插入节点， 被插节点) //插入
        // obj.replaceChild(新节点, 旧节点) //替换
        // obj.removeChild() //删除
        // 11. 获取页面的所有的checkobok怎么做？
        // 1 //注意： 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上（包含）建议用prop
        // 2 //1、根据id获取checkbox
        // 3 $("#cbCheckbox1");
        // 4 获取所有的checkbox
        // 5 $("input[type='checkbox']"); //or
        // 6 $("input[name='cb']");
        // 12. 看到下面的代码解释一下原因
        // var foo = "11" + 2 - "1"
        // console.log(foo);
        // console.log(typeof(foo));
        // 解释因为"11"+2属于字符串拼接拼接完以后就是"112",在通过"112"-"1"这属于-号有个隐式转化转化为数值型所以log出来就是111
        // 13. 已知有字符串 foo = "get-element-by-id", 写出一个 function将其转换为驼峰表示法 "getElementById"
        // function combo(msg) {
        //     var arr = msg.split("-"); //split("-")以-为分隔符截取字符串，返回数组
        //     for (var i = 1; i < arr.length; i++) {
        //         arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
        //     }
        //     msg = arr.join(""); //join()加入什么，连接数组元素，返回字符串
        //     return msg;
        // }
        // foo = "get-element-by-id";
        // console.log(combo(foo));
        // 14. 介绍一下javascript的splice()的这个方法
        // 1. 删除 - 用于删除元素， 两个参数， 第一个参数（ 要删除第一项的位置）， 第二个参数（ 要删除的项数）
        // 2. 插入 - 向数组指定位置插入任意项元素。 三个参数， 第一个参数（ 插入位置）， 第二个参数（ 0）， 第三个参数（ 插入的项）
        // 3. 替换 - 向数组指定位置插入任意项元素， 同时删除任意数量的项， 三个参数。 第一个参数（ 起始位置）， 第二个参数（ 删除的项数）， 第三个参数（ 插入任意数量的项）
        // 15.比较attachEvent和addEventListener?
        // 一、 适应的浏览器版本不同
        // attachEvent—— 兼容： IE7、 IE8； 不兼容firefox、 chrome、 IE9、 IE10、 IE11、 safari、 opera
        // addEventListener—— 兼容： firefox、 chrome、 IE、 safari、 opera； 不兼容IE7、 IE8
        // 二、 针对的事件不同
        // attachEvent中的事件带on 而addEventListener中的事件不带on
        // 三、 参数的个数不同
        // attachEvent方法两个参数： 第一个参数为事件名称， 第二个参数为接收事件处理的函数； addEventListener 有三个参数： 第一个参数表示事件名称（ 不含 on， 如 "click"）；
        // 第二个参数表示要接收事件处理的函数； 第三个参数是一个bool值， 一般为false
        // 16. 请写出一个圆的css样式？
        // .box {
        //   width: 100 px;
        //   height: 100 px;
        //   border - radius: 50 % ;
        //   background: #000;
        // }
        // 17. 如图父元素# content大小未知， 子元素# inner宽高为50px， 放置# inner的样式， 使其在# content中间显示。
        //     #content {
        //     position: relative;
        // }
        // #inner {
        //     position: absolute;
        //     top: 50%;
        //     left: 50%;
        //     transform: translate(-50%, -50%);
        // }
        // 18.编写js方法，找到数组arr中重复出现过的元素
        // 输入例子：foo([1,2,4,4,3,3,1,5,3]).sort()
        // 输出例子：[1,3,4]
        // var arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
        // function foo(arr) {
        //     var a = new Set()
        //         // arr.length-1是为了保证下面的arr[i+1]不会超过数组的长度
        //     for (var i = 0; i < arr.length - 1; i++) {
        //         // 判断，当当前元素和下一个元素相等时
        //         if (arr[i] == arr[i + 1]) {
        //             //向set数组添加新元素，因为set数组的唯一性，所以相同的值并不会添加多次
        //             a.add(arr[i])
        //         }
        //     }
        //     return Array.from(a)
        // }
        // console.log(foo(arr.sort()));
        // 19. 编写js方法， 提取url中的参数， 并以key - value的形式返回到json结构中。
        // 列：
        // 输入“ http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e”
        // 输出：{a:"1",b:"2",c"",d:"xxx"e:undefined}
        // var url = "http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e"
        // function parseQueryString(url) {
        //     var str = url.split("?")[1];
        //     var iterms = str.split("&");
        //     var arr, Json = {};
        //     for (var i = 0; i < iterms.length; i++) {
        //         arr = iterms[i].split("=");
        //         Json[arr[0]] = arr[1];
        //     }
        //     return Json;
        // }
        // var obj = parseQueryString(url);
        // console.log(obj);
    </script>
</body>

</html>
<style>

</style>